<template>
   <common-layout>
       <template #content>
          <van-nav-bar :safe-area-inset-top="true" :class="showHeader ? 'nav-bar show' : 'nav-bar'">
          <template #title>
              <van-image
                  v-show="showHeader"
                  round
                  width="32px"
                  height="32px"
                  style="padding-top: 7px"
                  :src="useCommon.user_info.avatar"
                />
            </template>
         </van-nav-bar>
       <div class="bg" id="my-header" ref="scrollRef" :style="{backgroundImage: 'url(' + bgImg + ')'}">
          <div class="header-box">
            <div class="img-box">
              <div class="img">
               <van-image
                  round
                  width="64px"
                  height="64px"
                  :src="useCommon.user_info.avatar"
                />
              </div>
              <div class="name-box">
                <div class="name">{{useCommon.user_info.nick_name}}</div>
                <div class="no">账号: {{useCommon.user_info.user_no}}</div>
              </div>
            </div>
            <div class="signature">{{useCommon.user_info.signature}}</div>

            <div class="gender">
              <van-tag color="#ceccccd9" style="padding:2px 8px;margin: 10px 0;" round>
                <van-icon
                  v-if="useCommon.user_info.gender === 1"
                  class="iconfont icon"
                  class-prefix="icon"
                  name="228yonghu_xingbienan"
                  :size="12"
                  style="color:#607b9c"
                />
                <van-icon
                  v-else
                  class="iconfont"
                  class-prefix="icon"
                  name="228yonghu_xingbienv"
                  :size="12"
                  style="color: #c5838c"
                />
              </van-tag>
            </div>

            <div class="info-box">
              <div class="num-box">
                <div class="item">
                  <span>{{numInfo.follow}}</span>
                  <span class="text">关注</span>
                </div>
                  <div class="item">
                  <span>{{numInfo.fans}}</span>
                  <span class="text">粉丝</span>
                </div>
                  <div class="item">
                  <span>{{numInfo.zan}}</span>
                  <span class="text">获赞</span>
                </div>
              </div>
              <div class="btn-box">
                <van-tag color="#cecece" text-color="#fff" style="padding:4px 10px;background-color: transparent; margin-right: 10px;" plain round>
                  编辑资料
                </van-tag>
                 <van-tag color="#cecece" text-color="#fff" style="padding:4px 10px;background-color: transparent; margin-right: 10px;" plain round>
                  <van-icon name="setting-o" @click="logout"/>
                </van-tag>
              </div>
            </div>
            <div>
            <!-- <van-button round type="primary" style="padding: 0 50px;font-size: 14px;" 
              color="#28AE61" size="small" @click="logout">
              退出登录
            </van-button> -->
            </div>
          </div> 
          
           <van-dialog v-model:show="show" title="提示" 
            show-cancel-button confirmButtonColor="#28AE61"
            @confirm="confirmLogout">
                <div class="tip">是否确认退出登录?</div>
            </van-dialog> 
       </div>
       <div class="pd8">
       <van-tabs v-model:active="activeName" color="#28AE61" shrink swipeable sticky :offset-top="46">
            <van-tab title="作品" name="works">
              <van-empty description="暂无作品" />
            </van-tab>
            <van-tab title="收藏" name="collection">
               <van-empty description="暂无收藏作品" />
            </van-tab>
             <van-tab title="喜欢" name="like">
              <van-empty description="暂无喜欢作品" />
            </van-tab>
          </van-tabs>
        </div>
       </template>
    </common-layout>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useCommonStore } from "@/store/modules/common";
import { onMounted, onUnmounted, reactive, ref } from 'vue';

type DATANUM = {
  fans: number;
  zan: number;
  follow: number;
}
const router = useRouter()
const useCommon = useCommonStore();
const show = ref<boolean>(false)
const showHeader = ref<boolean>(false)
const bgImg = new URL('../../assets/meBg.png', import.meta.url).href
const scrollRef = ref<HTMLElement>()
const scrollTop = ref<number>(0)
const numInfo: DATANUM = reactive({
  fans: 0,
  zan: 0,
  follow: 0
})
const activeName = ref<string>('works')

onMounted(() => {
   const scrollView = scrollRef.value.parentNode as HTMLElement
   scrollView.addEventListener('scroll', onScroll, true)
})

// onUnmounted(() => {
//   const scrollView = scrollRef.value.parentNode as HTMLElement
//   scrollView.removeEventListener('scroll', onScroll, true)
// })

const onScroll = () => {
  scrollTop.value = scrollRef.value.parentNode.scrollTop
  if(scrollTop.value >= 100) {
    showHeader.value = true
  }else {
    showHeader.value = false
  }
}

const logout = () => {
  show.value = true
}

const confirmLogout = () => {
  localStorage.removeItem('token')
  useCommon.updateTabbarActive('index')
  useCommon.updateUserInfo({})
  router.push({ path: '/login', query: { from: 'me' }})
}
</script>
<style lang="less">
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
</style>
<style lang="less" scoped>
.tip {
  text-align: center;
  padding: 10px 20px;
}
.nav-bar {
  position: fixed;
  width: 100%;
  background-color: transparent;
} 
.show {
  background-color: rgba(0, 0, 0, 0.7);
}
.bg {
  width: 100%;
  min-height: 200px;
  position: relative;
  .header-box {
    padding: 20px 10px 10px 10px;
    .img-box {
      display: flex;
      align-items: center;
      .name-box {
        margin-left: 15px;
        color: #fff;
        .no {
          font-size: 12px;
          color: #cecece;
          margin-top: 10px;
        }
      }
    }
    .signature {
      color: #fff;
      font-size: 13px;
      font-weight: 300;
      margin-top: 5px;
    }
    .info-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .num-box {
        display: flex;
        align-items: center;
        .item {
          color: #fff;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-right: 10px;
          .text {
            color: #cecece;
          }
        }
      }
    }
  }
   
}

</style>